<template>
    <div id="film">
        <myswiper>
            <div class="swiper-slide" v-for="item in swiper_list" :key="item.filmId" style="width: 100%;height: 100%">
                <div :style="{backgroundImage:'url('+item.poster+')'}" style="width: 100%;height: 100%;background-size: cover;"></div>
            </div>
        </myswiper>
        <ul  style="position: sticky;top:0px;z-index: 100;">
            <router-link to="/film/nowplaying" tag="li" active-class="orange">正在热映</router-link>
            <router-link to="/film/comingsoon" tag="li" active-class="orange">即将上映</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    import myswiper from '../components/myswiper'
    export default {
        name: "film",
        data(){
          return{
              swiper_list:[],
          }
        },
        components:{
          myswiper,
        },
        created(){
          this.$bus.on('img_to_swiper',(res)=>{
              console.log('在film中',res);
              this.swiper_list=res;
          });
        },
        mounted() {

        },
        destroyed() {
            this.$bus.off('img_to_swiper');
        }
    }
</script>

<style scoped>
    .orange{color: orange;border-bottom: solid 2px orange;}
    ul{list-style: none; display: flex;height: 50px;margin-top: 30px;background: white;}
    ul>li{flex-grow: 1;text-align: center;line-height: 30px;cursor: pointer;}
</style>